<!DOCTYPE html>
<html>
  <head>
    <title>cart.html</title>
	
	<!-- 指定文件编码 -->
	<meta charset="utf-8" >
	
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    
    <!-- 1. 网页布局 -->
    
    <!-- 1.大盒子 -->
    <div>
    	<!-- 顶部 
    	border-bottom   距离底部的边框
    		1px 边框粗细
    		solid 实线
    		#999999 边框颜色
    		
    	line-height     文字占多高
    		50px    50像素
    	-->
    	<div style="border-bottom: 1px solid #999999; line-height: 50px;">
    		当前位置：
    		<!-- 用1个空白标签将文字包裹起来，指定样式 
    			style 代表指定这个元素的样式， 
    				color: 相当于是CSS的样式属性， 相当于设置文字颜色
    					常用50个 
    					red 颜色值: 红色
    						#999999 代表颜色值（小技巧：QQ截图，按住ctrl可以看到颜色值）
    		-->
    		<span style="color:#999999" id="s-name-1">
    			Aptamil 德国爱她美
    		</span>
    	</div>
    	
    	<!-- 中部 -->
    	<div>
    	
    		<!-- 左 
    			float: left 设置此盒子向左靠齐
    		-->
    		<div style="float:left">
    			<!-- 插入图片
    				img 代表插入图片
    				src 代表插入哪张图片
    			 -->
    			<img src="" id="s-img"/>	
    		</div>
    	
    	
    		<!-- 右， 相当于排到左边盒子的右边 -->
    		<div style="float:left">
    			<h3 id="s-name-2">Aptamil 德国爱她美</h3>
    			
    			<!-- 加样式
    				border: 边框， dotted 虚线
    				line-height: 行高
    				width:   宽度
    				background-color: 背景颜色
    				
    				font-size: 字体大小
    			 -->
    			<div style="border: 2px dotted #999999; line-height: 50px; width: 500px; background-color: #F3F3F3;">
    				促销价
    				<span style="color: #FF5500; font-size: 28px;">   
    					￥<span id="s-price">445.00</span> 
    				</span>	
    					
    				<span style="color: #FFFFFF; background-color: #FF9900;">   
    					<span id="s-dazhe">6.5</span>折 
    				</span>	
    				
    				
    				<span id="s-baoyou">包邮</span> 
    				
    				<span id="s-info">
    				6-10个月
    				</span>
    				
    				
    				
    				<input type="button" value="+" />
    				<input type="button" value="-" />
    			</div>
    		</div>
    	</div>
    	
    	
    	
    	
    	
    	
    	<!-- 底部 -->
    	<div></div>
    </div>
    
    
    
    
  </body>
</html>


<!--  jQuery文件： ajax的功能 -->
<script src="js/jquery.js"></script>


<!--  使用jQuery功能 -->
<script>

// 调用ajax功能
$.ajax({
	url: "servlet/ProductServlet",     // 接口地址、
	success: function(res) {   // 数据成功回来之后，自动调用功能
		// { name: "湘西腊肉"，price: 0.0001  }
	
		// res.name 代表取出数据对象中的 name 属性值
		//   {"baoyou":true,"dazhe":1.0E-5,"imgPath":"img/1.png","info":"非常好吃，特别好吃，一定要吃！","name":"湘西腊肉","price":0.0,"productId":100}
		// alert(res.price);
		
		// 如何 更新到页面上去？
		
		// 将获取回来的价钱 更新到 price 中去
		$("#s-price").html(  res.price   )		
		
		$("#s-dazhe").html( res.dazhe )
		
		$("#s-name-1").html( res.name )
		$("#s-name-2").html( res.name )
		
		if (res.baoyou) {
			$("#s-baoyou").html("包邮")
		} else {
			$("#s-baoyou").html("不包邮")	
		}

		$("#s-info").html( res.info )
		
		
		
		// 更改图片位置
		//  <span>xdsfsdf</span>  html  用于改变元素内部的内容
		//  <img src="XXXXX" />   attr  用于改变元素内部【属性】的值 
		$("#s-img").attr("src", res.imgPath)
	}
})


</script>



















